<script lang="ts">
	import { Icon } from '@smui/tab';
	import Textfield from '@smui/textfield';
	import MenuButton from '@/components/business/menu-button';
	import { useNavBarStore } from '@/store/modules/navBar';
	import { onMount } from 'svelte';
	import { debounce } from '$utils/debounce';
	import Navigation from './Navigation.svelte';
	import { page } from '$app/stores';
	import Controller from './Controller.svelte';
	import { goto } from '$utils/intercept';

	let showContent: NavProps = {};
	let bannerText: string = 'Welcome to our store';
	const navStore = useNavBarStore();
	const { searchLabel } = navStore;
	navStore.showContent!.subscribe(
		debounce((value) => {
			// console.log('scrible: ', value);
			showContent = value as NavProps;
		}, 50)
	);

	navStore.bannerText!.subscribe(
		debounce((value) => {
			value && (bannerText = value as string);
		}, 50)
	);

	let searchValue: string = '';

	let typeList = [
		{ label: 'All Type' },
		{ label: 'In Stock' },
		{ label: 'Pre-Order' },
		{ label: 'Custom' }
	];

	let sortList = [
		{ icon: 'sort', label: 'Default' },
		{ icon: 'swap_vert', label: 'Date,old to new' },
		{ icon: 'swap_vert', label: 'Date,new to old' },
		{ icon: 'height', label: 'Price,low to high' },
		{ icon: 'height', label: 'Price,high to low' },
		{ icon: 'sort_by_alpha', label: 'Alphabetically,A-Z' },
		{ icon: 'sort_by_alpha', label: 'Alphabetically,Z-A' }
	];

	const onSearch = debounce((e) => {
		if ($page.url.pathname.startsWith('/detail')) {
			goto('/allproducts?keyword=' + searchValue);
		}
		navStore.keyword!.update(() => searchValue);
	}, 500);

	onMount(() => {
		navStore.keyword!.subscribe((v) => {
			searchValue = v as string;
		});
	});

	$: hidden = $page.url.pathname === '/';
</script>

<div
	class="w-full h-190px min-h-190px bg-#111 flex-cc flex-col"
	style={hidden ? 'display: none' : ''}
>
	{#if showContent.showSearch}
		<div class="flex-1 w-1320px max-w-100% min-w-350px flex-cc">
			<Textfield
				variant="filled"
				style="--mdc-shape-small: 0"
				bind:value={searchValue}
				on:input={onSearch}
				label={$searchLabel}
				class="w-1/2 min-w-300px"
				helperLine$style="width: 200px;"
			>
				<div class="w-3rem flex-cc" slot="trailingIcon">
					<Icon class="material-icons">search</Icon>
				</div>
				<!-- <HelperText slot="helper">Helper Text</HelperText> -->
			</Textfield>
		</div>
	{/if}

	{#if showContent.showText}
		<div class="flex-1 w-1320px max-w-100% min-w-350px flex-cc">
			<h1 class="text-#fff text-5xl font-bold">{@html bannerText}</h1>
		</div>
	{/if}
	{#if showContent.showMenu}
		<div class="w-1320px min-w-350px max-w-100% flex justify-between items-center px-10px">
			<MenuButton text={'All Type'} list={typeList}></MenuButton>
			<MenuButton text="Sort By Default" list={sortList}></MenuButton>
		</div>
	{/if}
	{#if showContent.showController}
		<div class="w-1320px min-w-350px max-w-100% flex justify-between items-center px-10px">
			<Controller />
		</div>
	{/if}
	{#if showContent.showNavigation}
		<div class="w-660px min-w-350px max-w-100% flex justify-between items-center px-10px">
			<Navigation></Navigation>
		</div>
	{/if}
</div>
